---
title: Utiliser les Intégrations
description: Apprenez à ajouter des intégrations à votre projet Astro.
sidebar:
  label: Vue d'ensemble des intégrations
i18nReady: true
---

import IntegrationsNav from '~/components/IntegrationsNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';


Les **intégrations Astro** permettent d'ajouter de nouvelles fonctionnalités et de nouveaux comportements à votre projet en quelques lignes de code. Vous pouvez utiliser une intégration officielle, [des intégrations créées par la communauté](#intégrations-officielles) ou même [créer vous-même une intégration personnalisée](#créer-votre-propre-intégration).

Les intégrations peuvent…

- Débloquer React, Vue, Svelte, Solid et d'autres frameworks UI populaires.
- Activer le rendu à la demande avec un [adaptateur SSR](/fr/guides/on-demand-rendering/).
- Intégrer des outils comme MDX et Partytown avec quelques lignes de code.
- Ajouter de nouvelles fonctionnalités à votre projet, comme la génération automatique de sitemap.
- Écrire du code personnalisé qui se branche au processus de compilation, au serveur de développement, et plus encore.

:::tip[Répertoire des intégrations]
Parcourez ou recherchez des centaines d'intégrations officielles et communautaires dans notre [répertoire d'intégrations](https://astro.build/integrations/). Trouvez des paquets à ajouter à votre projet Astro pour l'authentification, l'analyse, la performance, le référencement (SEO), l'accessibilité, l'interface utilisateur, les outils de développement, et plus encore.
:::

## Intégrations Officielles

Les intégrations suivantes sont gérées par Astro.

<IntegrationsNav />

## Configuration automatique des intégrations

Astro inclut une commande `astro add` pour automatiser la mise en place des intégrations officielles. Plusieurs modules d'extension communautaires peuvent également être ajoutés en utilisant cette commande. Veuillez consulter la documentation de chaque intégration pour savoir si `astro add` est pris en charge, ou si vous devez [installer manuellement](#installation-manuelle).

Exécutez la commande `astro add` en utilisant le gestionnaire de paquets de votre choix et notre assistant d'intégration automatique mettra à jour votre fichier de configuration et installera toutes les dépendances nécessaires.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

Il est même possible d'ajouter plusieurs intégrations en même temps !

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react sitemap partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react sitemap partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react sitemap partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[Gestion des dépendances d'intégration]
Si vous voyez des avertissements comme `Cannot find package '[package-name]'` après avoir ajouté une intégration, votre gestionnaire de paquets peut ne pas avoir installé les [dépendances des pairs](https://nodejs.org/en/blog/npm/peer-dependencies/) pour vous. Pour installer ces paquets manquants, exécutez la commande suivante :

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install [package-name]
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add [package-name]
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add [package-name]
  ```
  </Fragment>
</PackageManagerTabs>
:::

## Installation manuelle

Les intégrations Astro sont toujours ajoutées via la propriété `integrations` dans votre fichier `astro.config.mjs`.

Il y a trois façons d'importer une intégration dans votre projet Astro :

1. [En installant un paquet d'intégration npm](#installation-dun-paquet-npm).
2. En important votre propre intégration depuis un fichier local dans votre projet.
3. En écrivant votre intégration directement dans votre fichier de configuration.

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import installedIntegration from '@astrojs/vue';
import localIntegration from './my-integration.js';

export default defineConfig({
  integrations: [
    // 1. Importer à partir d'un paquet npm installé
    installedIntegration(),
    // 2. Importer depuis un fichier JS local
    localIntegration(),
    // 3. Un objet défini directement dans le fichier
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
})
```

Consultez la référence de l'[API des intégrations](/fr/reference/integrations-reference/) pour connaître les différentes façons d'écrire une intégration.

#### Installation d'un paquet NPM

Installez une intégration en utilisant un gestionnaire de paquet, puis mettez à jour `astro.config.mjs` manuellement.

Par exemple, pour installer l'intégration `@astrojs/sitemap` :

<Steps>
1. Installez l'intégration dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. Importez l'intégration dans votre fichier `astro.config.mjs`, et ajoutez-la à votre tableau `integrations[]`, avec toutes les options de configuration :

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    Notez que les différentes intégrations peuvent avoir des paramètres de configuration différents. Lisez la documentation de chaque intégration, et appliquez toutes les options de configuration nécessaires à l'intégration choisie dans `astro.config.mjs`.
</Steps>

### Options personnalisées

Les intégrations sont presque toujours conçues comme des fonctions d'usine (ou « factory functions » en anglais) qui renvoient l'objet d'intégration réel. Cela vous permet de passer des arguments et des options à la fonction d'usine afin de personnaliser l'intégration pour votre projet.

```js
integrations: [
  // Exemple : Personnalisez votre intégration avec des arguments de fonction
  sitemap({filter: true})
]
```

### Activer/Désactiver une intégration

Les intégrations évaluées comme fausses (« falsy » en anglais) sont ignorées, vous pouvez donc les activer et les désactiver sans vous soucier des valeurs `undefined` et booléennes laissées en suspens.

```js
integrations: [
  // Exemple : Sauter la génération d'un plan du site sous Windows
  process.platform !== 'win32' && sitemap()
]
```

## Mise à jour des intégrations

Pour mettre à jour toutes les intégrations officielles en une seule fois, exécuter la commande `@astrojs/upgrade`. Cela mettra à jour Astro et toutes les intégrations officielles vers leurs dernières versions.

### Mise à jour automatique

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Mise à jour d'Astro et des intégrations officielles vers la version la plus récente
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Mise à jour d'Astro et des intégrations officielles vers la version la plus récente
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Mise à jour d'Astro et des intégrations officielles vers la version la plus récente
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### Mise à jour manuelle

Pour mettre à jour manuellement une ou plusieurs intégrations, utilisez la commande appropriée de votre gestionnaire de paquets.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Exemple : mise à jour des intégrations React et Partytown
  npm install @astrojs/react@latest @astrojs/partytown@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Exemple : mise à jour des intégrations React et Partytown
  pnpm add @astrojs/react@latest @astrojs/partytown@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Exemple : mise à jour des intégrations React et Partytown
  yarn add @astrojs/react@latest @astrojs/partytown@latest
  ```
  </Fragment>
</PackageManagerTabs>

## Supprimer une intégration

<Steps>
1. Pour supprimer une intégration, désinstallez d'abord l'intégration de votre projet

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm uninstall @astrojs/react
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm remove @astrojs/react
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn remove @astrojs/react
      ```
      </Fragment>
    </PackageManagerTabs>

2. Ensuite, supprimez l'intégration de votre fichier `astro.config.*` :

    ```js title="astro.config.mjs" del={3,7}
    import { defineConfig } from 'astro/config';

    import react from '@astrojs/react';

    export default defineConfig({
      integrations: [
        react()
      ]
    });
    ```
</Steps>

## Trouver d'autres intégrations

Vous trouverez de nombreuses intégrations développées par la communauté dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/). Suivez les liens pour obtenir des instructions détaillées d'utilisation et de configuration

## Créer votre propre intégration

L'API des intégrations d'Astro s'inspire de Rollup et de Vite, et est conçue pour être familière à quiconque a déjà écrit un module d'extension Rollup ou Vite.

Consultez la référence de l'[API des intégrations](/fr/reference/integrations-reference/) pour apprendre ce que les intégrations peuvent faire et comment en écrire une vous-même.
